<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src='ajax.js'></script>
	<script>
		/*
			form表单点击提交数据以后，需要跳转页面
			ajax 异步进行数据传输
			【注】两者选其一。
		*/
		window.onload = function () {
			var oSubmit = document.getElementById("submit");
			var aInputs = document.getElementsByTagName("input");
			oSubmit.onclick = function () {
				$ajax({
					method: "post",
					url: "insertStudents.php",
					data: {
						name: aInputs[0].value,
						english: aInputs[1].value,
						math: aInputs[2].value,
						chinese: aInputs[3].value
					},
					success: function (result) {
						// alert(result);
						var obj = JSON.parse(result);
						alert(obj.message);
					},
					error: function (msg) {
						alert(msg);
					}
				})
			}
		}
	</script>
</head>

<body>
	<div class='container'>
		<div class='panel panel-primary'>
			<div class='panel-heading'>
				<h2>登入学员成绩</h2>
			</div>
			<div class='panel-body'>
				<div class='form-group'>
					<label for="name">学员姓名：</label>
					<input type="text" class='form-control' name='name' />
				</div>
				<div class='form-group'>
					<label for="english">英语成绩：</label>
					<input type="text" class='form-control' name='english' />
				</div>
				<div class='form-group'>
					<label for="math">数学成绩：</label>
					<input type="text" class='form-control' name='math' />
				</div>
				<div class='form-group'>
					<label for="chinese">语文成绩：</label>
					<input type="text" class='form-control' name='chinese' />
				</div>
				<div class='form-group'>
					<button id='submit' class='btn btn-primary form-control'>提交学员成绩</button>
				</div>
			</div>
			<div class='panel-footer'>
				<a href="showStudents.html">查看学员成绩</a>
			</div>
		</div>
	</div>
</body>

</html>